<template>
    <div class="dutydata-schoolduty">
        <Row>
            <RadioGroup v-model="form.watchlists_check_id" @on-change="checkChange">
                <Radio v-for="(item, index) in checkList" :key="index" :label="item.value">
                    {{ item.title.zh }}
                </Radio>
            </RadioGroup>
        </Row>

        <Row>
            <Card style="margin-top: 10px;" v-if="dataList.length">
                <h3 slot="title">{{ titles }}</h3>
                <div class="admin-duty-card" v-for="(item, index) in dataList" :key="index">
                    <div class="admin-duty-card-item">
                        {{ `${item.title}` }}
                        <span style="text-indent: 10px;color: #19be6b">{{ item.label }}</span>
                    </div>
                    <div class="admin-duty-card-btn">
                        <Button size="small" type="info" @click="updataItem (item)">编辑</Button>
                    </div>
                </div>
            </Card>
        </Row>

        <Row>
            <Button type="primary" style="margin-top: 20px" @click="SubmitData" :loading="butload">保存</Button>
        </Row>

        <Modal v-model="modalState" :title="data.title" @on-ok="handleSubmit ('form')">
            <Form ref="form" v-if="modalState" :model="data" label-position="left" :label-width="100">

                <FormItem label="状态" prop="t_type" :rules="{required: true, type: 'number', message: '请选择状态', trigger: 'change'}">
                    <Select v-model="data.t_type" @on-change="rulesChange">
                        <Option v-for="item in rulesList" :value="item.watchlists_rules_id" :key="item.watchlists_rules_id" placeholder="请选择细则">{{ item.name.zh?item.name.zh:item.name.mn }}</Option>
                    </Select>
                </FormItem>
                
                <FormItem label="上传图片">
                    <!-- <UpImg @uploadData="uploadData" :currentImg="data.img" ref="acquire"></UpImg> -->
                </FormItem>

                <FormItem label="备注">
                    <Input v-model="data.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    components: {
        // UpImg: resolve => {require(['@/components/PublicComp/UpImg.vue'], resolve);},
    },
    data () {
        return {
            checkid: null,
            titles: null,
            loading: true,
            switchState: false,
            modalState: false,
            imgStates: true,
            imgurls: null,
            butload: false,
            animal: 0,
            form:{
                watchlists_base_data_id: null,
                watchlists_check_id: null,
                data: []
            },
            addurl:'api/watchlists/v1/securitydata/add',
            editurl: 'api/watchlists/v1/securitydata/edit',
            selUrl: 'api/watchlists/v1/securitydata/findByWatchlistsBaseDataId/' + this.condition,

            data: Object,

            dataList: [],
            checkList: [],
            checkurl: 'api/watchlists/v1/securityitem/myWatchlistsCheck',

            rulesList: [],
            rulesurl: 'api/watchlists/v1/securityitem/info/',
        }
    },
    methods: {
        rulesChange (value) {
            let obj = this.rulesList.find(el => el.watchlists_rules_id === value)
            this.data.label = obj ? obj.name : ''
        },
        
        /************************************************************
         * 
         * 当前检查项下状态
         * 
         ************************************************************/
        rulesData (index) {
            this.rulesList = []
            this.$http.get(this.rulesurl + index).then(val=>{
                this.rulesList = val.data.check_rules
                let obj = this.rulesList.find(el => el.t_type === 0)
                this.data.t_type = obj ? obj.watchlists_rules_id : null
                this.modalState = true
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 跟新表单
         * @param   {data}            当前数据
         * 
         ************************************************************/
        updataItem (data) {
            this.data = data
            console.log(data, '999')
            this.rulesData (data.watchlists_check_id)
        },
        
        /************************************************************
         * 
         * 表单验证
         * 
         ************************************************************/
        handleSubmit (name) {
            this.form.data = []
            if (this.animal == 1) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.modalState = false
                    } else {
                        this.$Message.error('请检查填写内容');
                    }
                })
            } else {
                this.modalState = false
            }
        },
        SubmitData () {
            let data = [...this.dataList]
            data.map (el => {
                let obj = Object.assign({}, el)
                delete obj.title
                delete obj.label
                if (!el.t_type) obj.t_type = 0
                this.form.data.push (obj)
            })
            this.butload = true
            this.editSubmit (this.form)
            // if (!this.condition) {
            //     this.addSubmit (this.form)
            // } else {
            //     this.editSubmit (this.form)
            // }
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit (data) {
            this.$http.post(this.addurl, data).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit (data) {
            this.form.watchlists_base_data_id = this.condition
            this.$http.put(this.editurl, data).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 图片上传回调
         * 
         ************************************************************/
        uploadData (data) {
            this.data.file_catch_id = data.id
            this.data.img = data.file_url
        },
        
        /************************************************************
         * 
         * 选择检查项
         * 
         ************************************************************/
        checkChange (value) {
            let data = this.checkList.find (el => el.value === value)
            this.titles = data.title
            this.dataList = data.children
            console.log(data.children, '333')
        },
        
        /************************************************************
         * 
         * 我的检查项
         * 
         ************************************************************/
        checkData () {
            this.$http.get(this.checkurl).then(val=>{
                this.checkList = val.data.map (el => ({
                    title: el.name,
                    value: el.watchlists_check_id,
                    children: this.handelCheckData (el.child)
                }))
                if (this.condition) this.selData ()
            }).catch(err => {
            })
        },
        handelCheckData (data) {
            return data.map (el => ({
                title: el.name,
                watchlists_id: el.watchlists_id,
                content: '',
                file_catch_id: null,
                img: null,
                label: '正常',
                t_type: null,
                pid: el.pid,
                watchlists_check_id: el.watchlists_check_id
            }))
        },
        
        /************************************************************
         * 
         * 单条查询
         * 
         ************************************************************/
        selData(){
            this.$http.get(this.selUrl).then(val=>{
                val.data.map(el => {
                    let obj = this.checkList.find (item => item.value === el.watchlists_check_id)

                    el.datas.map (m => {
                        let str = obj.children.find (iten => iten.watchlists_check_id === m.watchlists_check_id)
                        if (str) {
                            str.content = m.content
                            str.file_catch_id = null
                            str.label = m.rule_name
                            str.img = m.img
                            str.t_type = m.t_type
                        }
                    })
                })
            }).catch(err => {
            })
        }
    },
    created () {
        this.checkData ()
    },
};
</script>
<style lang="less">
.dutydata-schoolduty {
    width: 100%;
    height: auto;
    position: relative;
    .admin-duty-card {
        display: flex;
        margin-top: 10px;
        &:first-of-type {
            margin: 0;
        }
        &-item {
            flex: 1;
        }
        &-btn {
            min-width: 45px;
            max-width: 45px;
            flex: 1;
        }
    }
}
</style>